import { Drawer } from '@ycx/ui';
import { useTheme } from '@/store/settingsStore.ts';
import { Button, ConfigProvider, Descriptions, DescriptionsProps, Image, Space } from 'antd';
import { forwardRef, useImperativeHandle, useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import MaintenancePlanServices from '@/api/services/maintenancePlanServices.ts';
import { useCatch } from '@/hooks';

export type DetailDrawerRef = {
  open: (orderId: number) => void;
};

const DetailDrawer = forwardRef<DetailDrawerRef>((_props, ref) => {
  const theme = useTheme();
  const catchFn = useCatch();
  const [id, setId] = useState<number>();
  const [open, setOpen] = useState(false);

  const { data } = useQuery({
    queryKey: ['maintenance-plan-detail', id],
    queryFn: () => catchFn(() => MaintenancePlanServices.getDetail(id!)),
    select: ({ data }) => data,
    enabled: !!id,
    staleTime: 0,
  });

  useImperativeHandle(ref, () => ({
    open: (orderId: number) => {
      setId(orderId);
      setOpen(true);
    },
  }));

  const items: DescriptionsProps['items'] = [
    {
      key: 'alarmDesc',
      label: '病害类型',
      children: data?.alarmDesc,
      span: 12,
    },
    {
      key: 'reportLng',
      label: '经纬度',
      children: `${data?.reportLng}-${data?.reportLat}`,
      span: 12,
    },

    {
      key: 'carNo',
      label: '报警设备',
      children: data?.carNo,
      span: 12,
    },
    {
      key: 'alarmTime',
      label: '报警时间',
      children: data?.alarmTime,
      span: 12,
    },
    {
      key: 'reportPosition',
      label: '上报位置',
      children: data?.reportPosition,
      span: 24,
    },
    {
      key: 'reportName',
      label: '上报部门',
      children: data?.reportName,
      span: 24,
    },
    {
      key: 'reportDesc',
      label: '详细说明',
      children: data?.reportDesc,
      span: 24,
    },
    {
      key: 'fileList',
      label: '现场照片',
      children:
        data?.fileList && data?.fileList.length ? (
          <Image.PreviewGroup>
            <Space size={8}>
              {data?.fileList?.map((item) => (
                <Image
                  placeholder={true}
                  key={item.id}
                  width="100%"
                  src={`https://oss.uconcern.com/${item.fileUrl}`}
                />
              ))}
            </Space>
          </Image.PreviewGroup>
        ) : (
          '-'
        ),
      span: 24,
    },
  ];

  const close = () => {
    setOpen(false);
    setId(undefined);
  };

  return (
    <Drawer
      title="病害详情"
      width={600}
      theme={theme}
      open={open}
      onClose={close}
      footer={
        <Button type="primary" onClick={close}>
          返回
        </Button>
      }
    >
      <ConfigProvider
        theme={{
          components: {
            Descriptions: {
              itemPaddingEnd: 8,
            },
          },
        }}
      >
        <Descriptions layout="vertical" size="small" column={24} items={items} />
      </ConfigProvider>
    </Drawer>
  );
});

export default DetailDrawer;
